import { MciTimelineItem, MciTextarea } from '@/components/base';
import { TApprovalEndActivity, TApprovalHistoryData } from '@/components/business/Approval/approval-helper';

// import { MciRichEditor } from '@/components/complex';

// import { t } from '@/locales';
import { PropType } from 'vue';
import { approvalDateFormat } from '.';
import { renderCCInfo } from './CCInfo';
// 完成节点
export const EndNode = defineComponent({
  props: {
    data: {
      type: Object as PropType<TApprovalEndActivity | undefined>,
      default: () => {}
    },
    // 审批是否都已经全部完成
    isApproveFinish: {
      type: Boolean,
      default: false
    },
    sourceData: {
      type: Object as PropType<TApprovalHistoryData>,
      default: null
    }
  },
  setup(props) {
    // 撤回的用户，始终都是提交人
    const revokeUserName = computed(() => {
      return props.sourceData?.startActivity?.stater?.userName || '';
    });
    const revokeReason = computed(() => {
      return props.sourceData?.historicProcessInstance?.revokeReason || '';
    });

    const approvalConclusion = computed(() => {
      return props.sourceData?.historicProcessInstance?.approvalConclusion;
    });
    return {
      approvalConclusion,
      revokeUserName,
      revokeReason
    };
  },
  render() {
    const renderRevokeContent = () => {
      return (
        <>
          <div class="text-label-12  mt-4 ">
            {'由'} <span class="text-value-12">{this.revokeUserName}</span> {'撤回'}
          </div>
          {this.revokeReason ? (
            <div class="bg-gray-1 mt-8 p-8 rounded-4">
              {/* <MciRichEditor modelValue={this.revokeReason} mode="view" ellipsis={3} /> */}
              <MciTextarea modelValue={this.revokeReason} mode="view" ellipsis={3}></MciTextarea>
            </div>
          ) : (
            ''
          )}
          <div class="text-label-12 mt-4">{approvalDateFormat(this.data?.endTime || '')}</div>
        </>
      );
    };
    return (
      <MciTimelineItem hollow={true} type={this.isApproveFinish ? 'primary' : ''}>
        <div class="text-value-14">{this.data?.activityName || '完成'}</div>
        {this.approvalConclusion === 'REVOKED' ? renderRevokeContent() : null}
        {renderCCInfo('end', this.data)}
      </MciTimelineItem>
    );
  }
});
